<template>
	<view class="" style="overflow:hidden;" v-if="status">
		<!-- 蒙版 -->
		<view class="position-fixed top-0 bottom-0 left-0 right-0" :style="getMaskColor" @click="hiden" style="z-index:9999;" v-if="mask"></view>
		<!-- 弹出框内容 -->
		 <view class="position-fixed animation" :class="getBodyClass" :style="getBodyStyle" style="z-index:10000">
			<slot></slot>
		</view>
	</view> 
</template>

<script>
	export default {
		props:{
			maskColor:{//蒙版颜色是否开启
				type:Boolean, 
				default:false
			},
			mask:{//是否开启蒙版
				type:Boolean,
				default:true
			},
			bottom:{//是否处于底部
				type:Boolean,
				default:false
			},
			bodyWidth:{//弹出层内容宽度
				type:Number,
				default:0
			},
			bodyHeight:{//弹出层内容高度
				type:Number,
				default:0
			},
			bgClass:{
				type:Boolean,
				default:false
			},
			// tabbar高度
			tabbarHeight:{
				type:Number,
				default:0
			}
			
		},
		data() {
			return {
				status:false,
				x:-1,
				y:-1,
				maxX:0,//弹窗的最大横向位移
				maxY:0,//弹窗的最大纵向位移
			}
		},
		mounted() {
			var vm = this;
			uni.getSystemInfo({
			    success: function (res) {
					// res.windowWidth  获取的手机屏幕宽度
				   vm.maxX = res.windowWidth - uni.upx2px(vm.bodyWidth);
				   vm.maxY = res.windowHeight - uni.upx2px(vm.bodyHeight) - uni.upx2px(vm.tabbarHeight);
			    }
			});
		},
		computed:{
			getMaskColor(){ //通过计算属性判断蒙版是否存在，存在的话直接添加 颜色即可
				let i = this.maskColor ? 0.5 : 0;
				return `background-color: rgba(0,0,0,${i});`
			},
			getBodyClass(){//通过计算属性确定其弹出层是否在底部显示
				let bottom = this.bottom ? 'left-0 right-0 bottom-0':'rounded';
				let bgStyle = this.bgClass ? `bg-dark text-white` : 'bg-white';
				return bottom +' '+ bgStyle
			}, 
			getBodyStyle(){//通过计算属性确定其弹出层的位置
				let left = this.x > -1?`left:${this.x}px;`:'';
				let top = this.y > -1?`top:${this.y}px;`:'';
				return left + top
			},
		},
		methods: {
			show(x=-1,y=-1){
				if(this.status){
					return;
				}
				this.x = (x > this.maxX) ? this.maxX : x;
				this.y = (y > this.maxY) ? this.maxY : y;
				this.status = true;
			},
			hiden(){
				this.$emit('hiden')
				this.status = false;
			}
		}
	}
</script>

<style scoped>
	@import '@/common/free.css';
	@import '@/common/common.css';
	animation:  translate 500ms ease 1;
	@keyframes translate{
		0%{
			transform: scale(0,0);
			opacity: 0;
		}
		100%{
			transform: scale(1,1);
			opacity: 1;
		}
	}
</style>
